<template>
  <div class='trial-view loading-view' @click="openTryoutSkuDialog">
    <img :src="trialImage" />
  </div>
</template>

<script>
import 'dingtalk-jsapi/entry/union';
import openLink from 'dingtalk-jsapi/api/biz/util/openLink';
import close from 'dingtalk-jsapi/api/biz/navigation/close';
// 调用钉钉的前端sdk，在合适的时机（应用自行决定）调起开通试用的弹窗
import { openTryoutSku } from 'dingtalk-design-libs';
import { getLocalesOssUrl } from '@src/util/assets'
const TrialImage = getLocalesOssUrl('/trial.png')
import * as querystring from 'src/util/querystring';
import dingtalk from 'src/util/dingtalk';
import AppConfig from 'app.config';
export default {
  name: 'trial-view',
  data() {
    return {
      isOpen: false,
      pending: false,
      trialImage: TrialImage,
      timer: null,
      params: {}
    }
  },
  async mounted() {
    setTimeout(() => {
      this.openTryoutSkuDialog();
    }, 500);
  },
  methods: {
    openTryoutSkuDialog(){
      const params = querystring.parse(location.search);

      openTryoutSku({
      // corpId可以从应用首页的url上获取到
        corpId: params.corpId,
        // 应用的appId
        appId: '3144', // params.appId,
        // 从应用首页的url上获取到，url上参数名为 purchaseToken。
        // purchaseToken如何配置参照下文”配置入口地址“章节。
        token: params.purchaseToken,
        miniAppId: '', // 如果是三方小程序应用，需要设置一下自身的miniAppId。H5微应用可以不设置这个参数
      }).then((res) => {
        const {
        // action的值为：
        // 'ok'，用户执行了开通动作，或将自己加入了已开通的应用的可见范围内
        // 'cancel', 用户点击了取消按钮
        // 'unknown'，用户点击空白区域关闭了弹窗，此时可以跟cancel采取同样的处理逻辑
          action,
          // 开通了应用的组织的corpId。因为个人开通可能会用钉钉的隐藏组织，所以开通应用的组织的corpId以这里返回的为准。
          corpId,
        } = res;
        // action不是ok的情况下，可以不采取任何动作
        if(action == 'ok') {
          setTimeout(()=>{
            const url = `https://app.shb.ltd/client/pc?corpId=${params.corpId}&ddtab=true`
            openLink({ url }).then(() => close({}));
          },500)
        }
      }).catch(() => {
      // 钉钉侧出现了技术异常，比如打开弹窗失败等，出现概率非常低
      });
    }
  }
}
</script>

<style lang="scss">
.trial-view {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  img {
    height: 100%;
    width: 100%;
    object-fit: revert;
  }
}
</style>